<template>
  <el-card :body-style="{ width: '100%' }" class="my-box-card">
    <div class="article-title">
      <a @click="view(art.id)">{{art.artName}}</a>
      <i class="el-icon-view">{{art.scan}}</i>
      <i class="el-icon-chat-dot-round">{{art.comment_num}}</i>
    </div>
    <div class="article-desc">
      <span>{{art.summary}}</span>
    </div>
    <div class="article-bottom">
      <span class="author">
        <i class="el-icon-user">{{art.author}}</i>
      </span>
      <el-tag
        :key="t.id"
        @click="showTag(t.id)"
        class="my-tag"
        plain
        round
        size="mini"
        type="primary"
        v-for="t in art.tags"
      >{{t.tag_name}}</el-tag>
      <span class="article-create-time">
        <i class="el-icon-time">{{art.create_time}}</i>
      </span>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    art: {
      type: Object,
      required: true,
      default: () => { }
    }
  },
  methods: {
    view (id) {
      this.$router.push({ name: 'articleById', params: { id } })
    },
    showTag (id) {
      this.$router.push({ name: 'articleByTag', params: { id } })
    }
  }
}
</script>

<style>
.my-box-card {
  line-height: 24px;
  text-align: left;
  width: 100%;
}
.my-box-card div:not(:last-child) {
  margin-bottom: 10px;
}
.article-title {
  padding-right: 35px;
}
.article-title a {
  font-weight: 600;
}
.article-title i {
  float: right;
  font-size: 15px;
  margin-right: 5px;
  margin-left: 5px;
  color: #a6a6a6;
}
.article-desc {
  font-size: 13px;
}
.article-bottom {
  font-size: 13px;
  color: #a6a6a6;
}
.author {
  padding-right: 18px;
}
.my-tag {
  text-align: center;
  margin-left: 6px;
}
.article-bottom > .article-create-time {
  float: right;
  padding-right: 35px;
}
</style>
